import React, { Component } from 'react'
import './index.css'
import PropTypes from 'prop-types'
import ImgContainer from '../ImgContainer'
import img1 from './img/1.jpg'
import img2 from './img/2.webp'
import img3 from './img/3.jpg'
import img4 from './img/4.jpg'
import img5 from './img/5.webp'
import SwitchArrow from '../SwitchArrow/index.jsx'
export default class Banner extends Component {
  static defaultProps = {
    width:520,
    height:280,
    imgSrcs:[img1,img2,img3,img4,img5],
    autoDuration:3000,
    duration: 2000
  }
  static propTypes = {
    width:PropTypes.number.isRequired,
    height:PropTypes.number.isRequired,
    imgSrcs:PropTypes.arrayOf(PropTypes.string).isRequired,
    autoDuration:PropTypes.number.isRequired,
    duration:PropTypes.number.isRequired,
  }
  state = {
    currentIndex:0,
  }
  changeTo = type =>{
    let current = this.state.currentIndex
    console.log(type)
    if(type === 'left'){
      current--
      
    }else{
      current++
    }
    if(current < 0){
      current = this.props.imgSrcs.length - 1
    }else if(current > this.props.imgSrcs.length - 1){
      current = 0
      
    }
    // this.setState({
    //   currentIndex:current
    // })
    this.handleSwitch(current)
  }
  imgContainerRef = el=>{
    console.log(el)
    this.imgContainer = el
  }
  handleSwitch = index=>{
      //  得到组imgContainer 组件对象
      this.imgContainer.switchTo(index)
      this.setState({
        currentIndex:index
      })
  }
  render() {
    return (
      <> 
      <div
      className='banner-container'
      style={
        {
          width:this.props.width,
          height:this.props.height,
          overflow:'hidden'
        }
      }
      >
        <ImgContainer 
        ref={this.imgContainerRef}
        imgSrcs={this.props.imgSrcs} imgWidth={this.props.width} imgHeight={this.props.height}
        duration={this.props.duration}
        
        />
         <button onClick={
        ()=>{ this.handleSwitch(3) } 
       }>点击显示第三张</button>
       <button onClick={
        ()=>{ this.handleSwitch(2) } 
       }>点击显示第三张</button>
       <SwitchArrow onChange={
       this.changeTo
      }
       />
      </div>
    
       </>
    )
  }
}
